<template>
	<teleport to="body">
		<div class="PDFViewerContainer" v-if="visible">
			<VuePDF
				v-for="page in PDF.pages"
				class="PDFViewer"
				annotation-layer
				:key="page"
				:pdf="PDF.pdf"
				:page="page"
				:height="height"
				@loaded="onLoaded"
				@annotation="onAnnotation"
				@annotation-loaded="PDFMounted = true"
			/>

			<YhButton class="close" type="" circle icon="Close" @click="emits('update:visible', false)"></YhButton>

			<div class="progress" v-if="false">
				<YhInput
					v-model="paginationPage"
					placeholder=" "
					:clearable="false"
					@input="paginationPage = paginationPage.replace(/[^\d]/g, '')"
					@blur="paginationPage = currentPage"
					@keydown="
						($event) => {
							if ($event.key === 'Enter') {
								if (+paginationPage > PDF.pages) {
									paginationPage = PDF.pages;
								} else if (+paginationPage < 1) {
									paginationPage = 1;
								}
								currentPage = +paginationPage;
							}
						}
					"
				></YhInput>
				<span>/</span>
				<span>{{ PDF.pages }}</span>
			</div>
		</div>
	</teleport>
</template>
<script setup lang="ts">
import { onUnmounted, ref } from 'vue';
import { YhButton, YhInput } from 'yh-ui';
// import { VuePDF, usePDF } from '@tato30/vue-pdf';
// import type { AnnotationEventPayload } from '@tato30/vue-pdf/dist/types/components/types';
import { VuePDF, usePDF } from '/@/components/PDFViewer/src/index';
import type { AnnotationEventPayload } from '/@/components/PDFViewer/src/components/types';

const props = defineProps({
	src: {
		type: String,
		required: true,
	},
	visible: {
		type: Boolean,
		default: false,
	},
	password: {
		type: String,
		default: '',
	},
});

const emits = defineEmits(['update:visible']);

const PDF = ref();
const height = ref(window.innerHeight || 0);
const currentPage = ref(1);
const paginationPage = ref<any>(1);
const PDFViewerDomList = ref<NodeListOf<Element>>();
const PDFMounted = ref(false);

const initPDF = async () => {
	PDF.value = usePDF(props.src, {
		password: props.password,
	});
};

const onLoaded = () => {
	paginationPage.value = currentPage.value;
	PDFViewerDomList.value = document.querySelectorAll('.PDFViewer');
};
const onAnnotation = (e: AnnotationEventPayload) => {
	if (e.type === 'link') {
		window.open(e.data?.url, '_blank');
	} else if (e.type === 'internal-link') {
		currentPage.value = e.data?.referencedPage || 1;
		PDFViewerDomList.value![currentPage.value - 1].scrollIntoView({ block: 'start' });
	}
};
const onScroll = () => {};

watch(
	() => props.visible,
	(val) => {
		if (!val) {
			height.value = window.innerHeight;
			PDFMounted.value = false;
		} else {
			initPDF();
		}
	}
);

const wheelListener = (e: WheelEvent) => {
	onScroll();
	if (e.ctrlKey) {
		e?.stopPropagation();
		e?.preventDefault();
		// const rate = 1.2;

		// if (e.deltaY > 0) {
		// 	if (height.value > 400) {
		// 		height.value /= rate;
		// 	}
		// } else {
		// 	if (height.value < 3000) {
		// 		height.value *= rate;
		// 	}
		// }
	}
};
const keydownListener = (e: KeyboardEvent) => {
	if (e.key === 'Escape' && PDFMounted.value) {
		emits('update:visible', false);
	}
};

onMounted(() => {
	window.addEventListener('wheel', wheelListener, { passive: false });
	setTimeout(() => {
		window.addEventListener('keydown', keydownListener);
	}, 2000);
});
onUnmounted(() => {
	window.removeEventListener('wheel', wheelListener);
	window.removeEventListener('keydown', keydownListener);
});
</script>
<style scoped lang="less">
.PDFViewerContainer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999999999;
	background-color: #333333;
	display: flex;
	flex-direction: column;
	gap: 15px;
	overflow: auto;
	animation: transitionIn 0.2s ease-in-out forwards;

	:deep(.PDFViewer) {
		display: flex !important;
		justify-content: center;

		.annotationLayer {
			top: auto;
			left: auto;
			right: auto;
			bottom: auto;

			section {
				cursor: pointer;
			}
		}
	}

	.progress {
		position: fixed;
		top: 15px;
		left: 15px;
		font-size: 16px;
		color: var(--next-color-white);
		background-color: rgba(0, 0, 0, 0.3);
		width: fit-content;
		height: 32px;
		line-height: 32px;
		border-radius: 16px;
		padding: 0 12px 0 3px;
		display: flex;
		align-items: center;
		gap: 8px;

		:deep(.el-input) {
			width: 55px;

			.el-input__wrapper {
				height: 26px;
				box-shadow: none !important;
				border: 1px solid rgba(144, 147, 153, 0.3) !important;
				background-color: rgba(144, 147, 153, 0.2) !important;
				border-radius: 13px 0 0 13px;

				input {
					color: var(--next-color-white);
					padding: 0;
				}
			}
		}
	}

	.close {
		position: fixed;
		top: 15px;
		right: 15px;
		transition: all 0.2s;
		border: 1px solid rgba(144, 147, 153, 0.3) !important;
		background-color: rgba(144, 147, 153, 0.2) !important;
		color: var(--next-color-white);

		&:hover {
			background-color: rgba(255, 255, 255, 0.15) !important;
		}

		:deep(span) {
			display: none;
		}
	}
}

@keyframes transitionIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
</style>
